import React, { useRef, useState } from 'react';
import { ActionType } from '@ant-design/pro-table';
import ProCard from '@ant-design/pro-card';
import { PageContainer } from '@ant-design/pro-layout';
import OrgList from '@/pages/Enterprise/Org/list';
import { useModel } from '@@/plugin-model/useModel';

import { OrgItem } from '@/pages/Enterprise/Org/data';
import EmployeeList from '@/pages/Employee/List/list';

const OrgPage: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const [orgId, setOrgId] = useState<number>();
  const [orgList, setOrgList] = useState<OrgItem[]>([]);
  const [orgName, setOrgName] = useState(initialState?.currentUser?.company || '');
  const orgRef = useRef<ActionType>();

  return (
    <PageContainer waterMarkProps={{ content: '' }} header={{ title: '', ghost: true }}>
      <ProCard
        gutter={16}
        style={{ background: '#f0f2f5', margin: '0px' }}
        bodyStyle={{ padding: '0px' }}
      >
        <ProCard colSpan="500px" ghost>
          <OrgList
            onChange={async (org) => {
              setOrgId(org.id);
              setOrgName(org.label);
              // @ts-ignore
              orgRef.current?.reset();
            }}
            onDataLoad={async (org) => {
              setOrgList(org);
            }}
            simpleMode={true}
          />
        </ProCard>
        <ProCard ghost>
          <EmployeeList orgName={orgName} orgId={orgId} orgList={orgList} actionRef={orgRef} />
        </ProCard>
      </ProCard>
    </PageContainer>
  );
};

export default OrgPage;
